<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#h{width: 400px;height: 660px;background: #AFEEEE;border: #AFEEEE solid;;}
			#h1{width: 400px;height: 35px;border: #000000  1px;line-height: 1PX;}
			   #h1-1{width: 35px;height: 35px;border: #000000  1px;float: right;}
			#h2{width: 400px;height: 50px;border: #000000  1px;}
			   #h2-1{width: 50px;height: 50px;border: #000000  1px;float: left;}
			   #h2-2{width: 50px;height: 50px;border: #000000  1px;float: right;}
			#h3{width: 400px;height: 100px;border: #000000  1px;text-align: right; font-size: 60px;}//显示框
			#h4{width: 400px;height: 40px;border: #000000  1px;}
			   #h4-1{width: 64px;height: 40px;border: #000000  1px;float: left;text-align: center;line-height: 15px;}
			#h5{width: 400px;height: 415px;border: #000000  1px;}
			#t{width: 96px;height: 66px;background:#E0FFFF;margin: 2px;float: left;text-align: center;}
			#t-math{width: 96px;height: 66px;background:white;margin: 2px;float: left;text-align: center;}
			#t0{width: 96px;height: 66px;background:#87CEFA;margin: 2px;float: left;text-align: center;}
			#p1{line-height: 2px;}
			#p2{font-size: 24px;}
			#p3{font-size: 30px;line-height: 28px;}
			#p4{font-size: 24px;font-family: 黑体;}
			
			#p6{font-size: 20px;font-family: 黑体;}
			#p8{font-size: 24px;font-family: 黑体;}
			div #t-math:hover{background: 	#F0F8FF;}
			div #t:hover{background: 	#F0F8FF;}
			div #t0:hover{background: 	#00BFFF;}
		</style>
		<script>
			var number1="";
			var number2="";
			var jjcc="";
			var result="";
			
			
			function show(number){
				//document.getElementById("h3").innerHTML=number;
				document.getElementById("h3").innerHTML=document.getElementById("h3").innerHTML+number;
				
			}
			function ysf(ys){
				
				jjcc=ys;
				
				number1=document.getElementById("h3").innerHTML;
				
				document.getElementById("h3").innerHTML="";
				
			}
			function dengyu(){
				
				number2=document.getElementById("h3").innerHTML;
				
				if(jjcc=="+"){
					result=Number(number1)+Number(number2);
					
				}else if(jjcc=="-"){
					result=Number(number1)-Number(number2);
				}else if(jjcc=="*"){
					result=Number(number1)*Number(number2);
				}else if(jjcc=="÷"){
					result=Number(number1)/Number(number2);
				}
				
				document.getElementById("h3").innerHTML=result;
				number1=result;
				
				
			}
			function qc(){
				document.getElementById("h3").innerHTML="";
				number1="";
				numner2="";
				jjcc="";
				result="";
				
			}
		</script>
	</head>
	<body>
		<div id="h">
			<div id="h1">
				<div id="h1-1"><span id="p2">×</span></div>
				<div id="h1-1"><span id="p2">□</span></div>
				<div id="h1-1"><span id="p2">—</span></div>
					<p id="p1">&nbsp; 计算器</p>
				
			</div>
			<div id="h2">
				<div id="h2-1"><p> <span id="p3">≡</span></p></div>
				<div id="h2-1"><p> <span id="p4">标准</span> </p></div>
				<div id="h2-1"> <p> <span id="p4"></span> </p></div>
				<div id="h2-2"> <p> <span id="p4"></span> </p></div>
			</div>
			<div id="h3">
				
			</div>
			<div id="h4">
				<div id="h4-1"><p> <span id="p6">MC</span> </p> </div>
				<div id="h4-1"> <p> <span id="p6">MR</span> </p></div>
				<div id="h4-1"> <p> <span id="p6">M+</span> </p></div>
				<div id="h4-1"> <p> <span id="p6">M-</span> </p></div>
				<div id="h4-1"> <p> <span id="p6">MS</span> </p></div>
				<div id="h4-1"> <p> <span id="p6">M</span> </p></div>
			</div>
			<div id="h5">
				<div id="t"> <p> <span id="p8">%</span> </p></div>
				<div id="t"> <p> <span id="p8">CE</span> </p></div>
				<div id="t"onclick="qc()"> <p> <span id="p8">C</span> </p></div>
				<div id="t"> <p> <span id="p8">←</span> </p></div>
				
				<div id="t"><p> <span id="p8">1/x</span> </p> </div>
				<div id="t"> <p> <span id="p8">x^2</span> </p></div>
				<div id="t"> <p> <span id="p8">y</span> </p></div>
				<div id="t"onclick="ysf('÷')"> <p> <span id="p8">÷</span> </p></div>   
				
				<div id="t-math"onclick="show(7)"> <p> <span id="p8">7</span> </p></div>
				<div id="t-math"onclick="show(8)"> <p> <span id="p8">8</span> </p></div>
				<div id="t-math"onclick="show(9)"> <p> <span id="p8">9</span> </p></div>
				<div id="t"onclick="ysf('*')"> <p> <span id="p8">*</span> </p></div>     
				
				<div id="t-math"onclick="show(4)"> <p> <span id="p8">4</span> </p></div>
				<div id="t-math"onclick="show(5)"> <p> <span id="p8">5</span> </p></div>
				<div id="t-math"onclick="show(6)"> <p> <span id="p8">6</span> </p></div>
				<div id="t"onclick="ysf('-')"> <p> <span id="p8">-</span> </p></div>     
				
				<div id="t-math"onclick="show(1)"> <p> <span id="p8">1</span> </p></div>
				<div id="t-math"onclick="show(2)"> <p> <span id="p8">2</span> </p></div>
			    <div id="t-math"onclick="show(3)"> <p> <span id="p8">3</span> </p></div>
				<div id="t"onclick="ysf('+')"> <p> <span id="p8">+</span></p></div>    
				
				<div id="t-math"><p> <span id="p8">+/-</span> </p> </div>
				<div id="t-math"onclick="show(0)"> <p> <span id="p8">0</span> </p></div>
				<div id="t-math"> <p> <span id="p8">.</span> </p></div>
				<div id="t0"onclick="dengyu()"> <p> <span id="p8">=</span> </p></div>     
			</div>
			
		</div>
		<p>在输出结果之后，加了一个number1=result; 可以计算多个数字连续加减</p>
	</body>
</html>
